<template>
	<div class="main-page">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<!-- 仅h5有效 打开App -->
		<popups v-model="popupsSwitch" @tapPopup="handleNavbarList" :popData="navbarListData" :x="navbarListX"
			:y="navbarListY" placement="top-start" />
		<view class="index">
			<!-- topBar -->
			<u-navbar :background="navbar" :is-back="false" :class="headerFlag ? 'header' : 'header bg-none scroll-hide'">
				<div class="headerRow">
					<div class="backs">
						<u-icon @click="back()" name="arrow-left" class="icon-back"></u-icon>

						<u-icon name="list" @click="popupsSwitch = !popupsSwitch" class="icon-list"></u-icon>
					</div>
					<div class="headerList" :class="headerFlag ? 'tab-bar' : 'tab-bar scroll-hide'">
						<div class="headerRow">
							<div class="nav-item" v-for="header in headerList" :key="header.id"
								:class="{ cur: scrollId === header.id }" @click="headerTab(header.id)">
								{{ header.text }}
							</div>
						</div>
					</div>
				</div>
			</u-navbar>

			<u-navbar :border-bottom="false" v-show="!headerFlag" class="header-only-back" :background="navbarOnlyBack"
				:is-back="false">
				<div>
					<div class="bg-back">
						<u-icon size="40" @click="back()" name="arrow-left" class="icon-back"></u-icon>
						<u-icon size="40" @click="popupsSwitch = !popupsSwitch" name="list" class="icon-list"></u-icon>
					</div>
				</div>
			</u-navbar>
		</view>

		<view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef">
			<scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y class="scroll-page"
				:scroll-top="tabScrollTop" @scroll="pageScroll">
				<view>
					<!-- 轮播图 -->

					<GoodsSwiper id="main1" :res="imgList" :video="goodsDetail.goodsVideo" />

					<view class="card-box top-radius-0" id="main2">
						<view class="-goods-msg">
							<!-- 没有拼团，秒杀等活动的情况下 -->
							<view>
								<view class="-goods-flex">
									<!-- 如果有积分显示积分 -->
									<view class="-goods-price">
										<span>¥</span><span class="price">{{goodsDetail.day_amount}}</span>/天
									</view>
								</view>
								<view class="-goods-desc pt-2 mb-2">
									商品押金：{{goodsDetail.deposit_amount}}
								</view>
								<view class="-goods-name desc-bold pb-2">
									{{ goodsDetail.goods_name || "" }}
								</view>

							</view>
						</view>
					</view>

					<view class="card-box">
						<view class="card-flex">
							<view class="card-title"> 促销 </view>
							<view class="card-content">
								<span>暂无促销信息</span>
							</view>
						</view>
						<view class="card-flex">
							<view class="card-title"> 起租日期 </view>
							<view class="card-content">
								<span>物流签收次日起租，物流途中不计算租金</span>
							</view>
						</view>
					</view>

					<!-- 店铺推荐 -->
					<storeLayout id="main7" :storeDetail="storeDetail" :goodsDetail="goodsDetail" :res="recommendList" />

					<!-- 宝贝详情 -->
					<GoodsIntro id="main9" :res="goodsDetail" :goodsParams="goodsParams" :goodsId="goodsDetail.goodsId"
						v-if="goodsDetail.id" />

					<!-- 宝贝推荐 -->
					<!-- <GoodsRecommend id="main11" :res="likeGoodsList" /> -->
				</view>
			</scroll-view>


			<view class="page-bottom mp-iphonex-bottom" id="pageBottom">
				<view class="icon-btn">
					<view class="icon-btn-item" @click="clickFavorite">
						<u-icon size="34" :class="is_favorite?'fte87722':''" name="star"></u-icon>
						<view class="icon-btn-name" :class="is_favorite?'fte87722':''">收藏</view>
					</view>
					<view class="icon-btn-item">
						<u-icon size="34" name="kefu-ermai"></u-icon>
						<view class="icon-btn-name">客服</view>
					</view>
				</view>
				<!-- 正常结算页面 -->
				<view class="detail-btn">
					<view class="to-buy to-store-btn" @click="shutMask(4, 'buy')">立即下单</view>
				</view>
			</view>
			<!-- 规格-模态层弹窗 -->
			<view class="spec">
				<!-- 商品规格  商品详情，以及默认参与活动的id-->
				<popupGoods :addr="delivery" ref="popupGoods" @changed="changedGoods" @closeBuy="closePopupBuy"
					@queryCart="cartCount()" :goodsDetail="goodsDetail" v-if="goodsDetail.id" :pointDetail="pointDetail"
					:wholesaleList="wholesaleList" @handleClickSku="selectSku" />


				<!-- 下架框 -->
				<takeDownFormSaleGoods ref="takeDownSale" v-if="takeDownFromSale" />
			</view>
		</view>
	</div>
</template>

<script>
	/************接口API***************/
	import {
		getGoodsDetail
	} from "@/api/goods.js";
	import * as API_Members from "@/api/members.js";
	import * as API_store from "@/api/store.js";
	import {
		modelNavigateTo
	} from "@/pages/tabbar/home/template/tpl.js";
	/************请求存储***************/
	import storage from "@/utils/storage.js";

	/************组件***************/

	import GoodsIntro from "./product/goods/-goods-intro"; //商品介绍组件
	import GoodsRecommend from "./product/goods/-goods-recommend"; //宝贝推荐
	import storeLayout from "./product/shop/-shop"; //店铺组件
	import GoodsSwiper from "./product/goods/-goods-swiper"; //轮播图组件
	import popupGoods from "@/components/m-buy/goods"; //购物车商品的模块
	import popupAddress from "./product/popup/address"; //地址选择模块
	import shares from "@/components/m-share/index"; //分享
	import popups from "@/components/popups/popups"; //气泡框
	import takeDownFormSaleGoods from "@/components/m-take-down-sale-goods/index"; //下架框
	import setup from "./product/popup/popup";

	export default {
		components: {
			popups,
			shares,
			GoodsIntro,
			GoodsRecommend,
			storeLayout,
			GoodsSwiper,
			popupGoods,
			popupAddress,
			takeDownFormSaleGoods
		},
		data() {
			return {
				setup,
				promotionShow: false, //弹窗开关
				// #ifdef H5
				navbarListX: 110, //导航栏列表栏x轴
				navbarListY: 80, //导航栏列表栏y轴
				// #endif
				// #ifdef MP-WEIXIN
				navbarListX: 100, //导航栏列表栏x轴
				navbarListY: 140, //导航栏列表栏y轴
				// #endif
				// #ifdef APP-PLUS
				navbarListX: 120, //导航栏列表栏x轴
				navbarListY: 170, //导航栏列表栏y轴
				// #endif
				navbarListData: [
					//导航栏列表栏数据
					{
						title: "首页",
						icon: "home-fill",
						___type: "other",
					},
					{
						title: "搜索",
						icon: "search",
						___type: "category",
					},
					{
						title: "个人中心",
						icon: "account-fill",
						___type: "other",
					},
				],
				popupsSwitch: false, //导航栏列表栏开关
				enableShare: false,
				selectedGoods: "", //选择的商品规格昵称
				isSeckill: false, // 是否秒杀活动
				pointDetail: "", // 是否是积分商品
				assemble: "", //拼团的sku
				navbarOnlyBack: {
					background: "transparent",
				},
				navbar: {
					background: "#fff",
				},

				productRefHeight: "",
				header: {
					top: 0,
					height: 50,
				},
				goodsParams: [], // 商品参数
				headerFlag: false, //顶部导航显示与否
				headerList: [
					//顶部导航文字按照规则来 详情全局搜索
					{
						text: "商品",
						id: "1",
					},
					{
						text: "评价",
						id: "2",
					},
					{
						text: "详情",
						id: "3",
					},
					{
						text: "推荐",
						id: "4",
					},
				],
				tabScrollTop: null,
				scrollArr: [],
				scrollId: "1",
				scrollFlag: true,
				current: "1", //当前显示的轮播图页
				goodsDetail: {}, //商品数据
				imgList: [], //轮播图数据
				favorite: false, //收藏与否flag
				recommendList: [], //推荐列表
				// maskFlag: false, //模态显示与否
				goodsInfo: false, //商品介绍弹窗
				addressFlag: false, //配送地址弹窗
				buyMask: false, //添加购物车直接购买，查看已选 弹窗
				num: 1, //添加到购物车的数量
				skuId: "", //
				storeDetail: "", //店铺基本信息,
				// 店铺信息
				storeParams: {
					pageNumber: 1,
					pageSize: 10,
				},

				likeGoodsList: "", //相似商品列表
				PromotionList: "", //活动,促销，列表
				specList: [],
				selectedSpec: [],
				nums: 0,
				delivery: "",

				exchange: {},

				startTimer: false, //未开启 是false

				routerVal: "",
				IMLink: "", // IM地址
				wholesaleList: [],
				takeDownFromSale: false, // 下架销售状态
				goodsId: '',
				is_favorite: false,
			};
		},
		mounted() {

			const {
				windowHeight
			} = uni.getSystemInfoSync();
			let bottomHeight = 0;
			let topHeight = 0;
			uni.getSystemInfo({
				success: function(res) {
					// res - 各种参数
					let bottom = uni.createSelectorQuery().select(".page-bottom");
					bottom
						.boundingClientRect(function(data) {
							if (data && data.height) {
								//data - 各种参数
								bottomHeight = data.height; // 获取元素宽度
							}
						})
						.exec();
					let top = uni.createSelectorQuery().select(".header");
					top
						.boundingClientRect(function(data) {
							if (data && data.height) {
								//data - 各种参数
								topHeight = data.height; // 获取元素宽度
							}
						})
						.exec();
				},
			});

			this.productRefHeight = windowHeight - bottomHeight + "px";
		},
		async onLoad(options) {
			this.goodsId = options.id
			this.getGoodsDetail()
			this.routerVal = options;
			// #ifdef MP-WEIXIN
			// 小程序默认分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"],
			});
			// #endif
		},
		async onShow() {
			this.goodsDetail = {};
			this.getGoodsDetail()
		},

		methods: {
			getGoodsDetail(query) {
				getGoodsDetail({
					id: this.goodsId
				}).then(res => {
					this.goodsDetail = res.data.data.goods
					this.imgList = this.goodsDetail.images
					this.storeDetail = res.data.data.merchant
					this.is_favorite = res.data.data.is_favorite
				})
			},
			// 重新打开下架
			reStartTakeDownSale() {
				this.$refs.takeDownSale.show = true
			},
			share() {
				return `/pages/product/goods?id=${this.routerVal.id}&goodsId=${this.routerVal.goodsId}`;
			},
			/**
			 * 导航栏列表栏
			 */
			handleNavbarList(val) {
				modelNavigateTo({
					url: val
				});
			},

			/**
			 * 循环出当前促销是否为空
			 */
			emptyPromotion() {
				if (
					this.PromotionList == "" ||
					this.PromotionList == null ||
					this.PromotionList == []
				) {
					return true;
				}
			},
			selectSku(idObj) {
				this.init(idObj.skuId, idObj.goodsId);
			},
			/**
			 * 初始化信息
			 */





			/**选择商品 */
			changedGoods(val) {
				this.selectedGoods = val;
			},

			/**  点击子级地址回调参数*/
			deliveryFun(val) {
				this.delivery = val;
			},
			/**
			 * 地址子级关闭回调
			 */
			closePopupAddress(val) {
				this.addressFlag = val;
				// this.maskFlag = false;
			},
			/**
			 * 商品规格子级关闭回调
			 */
			closePopupBuy(val) {
				this.buyMask = val;
				// this.maskFlag = false;
			},

			/** 参与拼团  创建拼团 */
			toAssembleBuyNow(order) {
				this.shutMask(4, "PINTUAN", order);
			},

			/**
			 * 查询购物车总数量
			 */
			cartCount() {
				if (storage.getHasLogin()) {
					API_trade.getCartNum().then((res) => {
						this.nums = res.data.result;
					});
				}
			},

			/**
			 * 返回
			 */
			back() {
				if (getCurrentPages().length == 1) {
					uni.switchTab({
						url: "/pages/tabbar/home/index",
					});
				} else {
					uni.navigateBack();
				}
			},

			/**
			 * 获取店铺信息
			 */
			getStoreBaseInfoFun(id) {
				API_store.getStoreBaseInfo(id).then((res) => {
					if (res.data.success) {
						this.storeDetail = res.data.result;
					}
				});
			},

			/**
			 * 删除收藏店铺
			 */
			deleteGoodsCollectionFun() {
				API_Members.deleteGoodsCollection({
					goods_id: this.goodsDetail.id
				}).then((res) => {
					if (res.data.code === 1) {
						uni.showToast({
							title: "商品已取消收藏!",
							icon: "none",
						});
						this.is_favorite = !this.is_favorite;
					}
				});
			},

			/**
			 * 获取商品是否已被收藏
			 */
			getGoodsCollectionFun(goodsId) {
				if (storage.getHasLogin()) {
					API_Members.getGoodsIsCollect("GOODS", goodsId).then((res) => {
						this.favorite = res.data.result;
					});
				}
			},

			/**
			 * 跳转到店铺页面
			 */
			navigateToStore(store_id) {
				uni.navigateTo({
					url: `/pages/product/shopPage?id=` + store_id,
				});
			},

			/**
			 * 规格弹窗开关
			 */
			shutMask(flag, buyFlag, type) {
				if (this.goodsDetail.sku_attr.length === 0) return
				this.$refs.popupGoods.show()
			},

			/**
			 * 收藏
			 */
			clickFavorite() {
				if (this.is_favorite) {
					// 取消收藏
					this.deleteGoodsCollectionFun();
					return false;
				}
				API_Members.collectionGoods({
					goods_id: this.goodsDetail.id
				}).then((res) => {
					if (res.data.code === 1) {
						uni.showToast({
							title: "收藏成功!",
							icon: "none",
						});
					}
				});
				this.is_favorite = !this.is_favorite;
			},

			/**
			 * 顶部header显示或隐藏
			 */
			pageScroll(e) {
				if (this.scrollFlag) {
					this.calcSize();
				}
				if (e.detail.scrollTop > 200) {
					//当距离大于200时显示回到顶部按钮
					this.headerFlag = true;
				} else {
					//当距离小于200时隐藏回到顶部按钮
					this.headerFlag = false;
				}
				if (e.detail.scrollTop < this.scrollArr[0] - 10) {
					this.scrollId = "1";
				}
				if (e.detail.scrollTop > this.scrollArr[1] - 10) {
					this.scrollId = "2";
				}
				if (e.detail.scrollTop > this.scrollArr[2] - 10) {
					this.scrollId = "3";
				}
				if (e.detail.scrollTop > this.scrollArr[3] - 10) {
					this.scrollId = "4";
				}
			},

			/**
			 * 计算每个要跳转到的模块高度信息
			 */
			calcSize() {
				let h = 0;
				let that = this;
				let arr = [
					"main1",
					"main2",
					"main3",
					"main4",
					"main5",
					"main6",
					"main7",
					"main8",
					"main9",
					"main10",
					"main11",
				];
				arr.forEach((item) => {
					let view = uni.createSelectorQuery().select("#" + item);
					view
						.fields({
								size: true,
							},
							(data) => {
								if (
									item === "main1" ||
									item === "main5" ||
									item === "main9" ||
									item === "main11"
								) {
									that.scrollArr.push(h);
								}
								if (data && data.height) {
									h += data.height;
								}
							}
						)
						.exec();
				});
				this.scrollFlag = false;
			},

			/**
			 * 点击顶部跳转到对应位置
			 */
			headerTab(id) {
				if (this.scrollFlag) {
					this.calcSize();
				}
				this.scrollId = id;

				this.$nextTick(() => {
					this.tabScrollTop = this.scrollArr[id - 1];
				});
			},

			/**
			 * 点击分享
			 */
			async shareChange() {
				this.enableShare = true;
			},
		},
	};
</script>

<style lang="scss" scoped>
	// #ifdef MP-WEIXIN
	@import "./product/mp-goods.scss";
	// #endif

	@import "./product/style.scss";
	@import "./product/product.scss";
</style>